<template>
  <div class="login">
    <h1>vue3.0 + vite + ts 学习之路</h1>

    <!-- keep-alive缓存组件 
    include是需要缓存的组件；
    exclude是除了某些组件都缓存；
    include 和 exclude 属性允许组件有条件地缓存。二者都可以用逗号分隔字符串、正则表达式或一个数组来表示
    max只在2.5.0新增，最多可以缓存多少组件实例。一旦这个数字达到了，在新实例被创建之前，已缓存组件中最久没有被访问的实例会被销毁掉。
     -->
    <keep-alive :include="['Login', 'Register']" exclude="" max>
      <Login @login="cutCom" v-if="flag"></Login>
      <Register @register="cutCom" v-else></Register>
    </keep-alive>
  </div>
</template>

<script lang="ts" setup>
import { ref, Ref } from "vue";
import Login from "./login.vue";
import Register from "./register.vue";

let flag = ref<boolean>(true);
const cutCom = () => {
  flag.value = !flag.value;
};
</script>

<style scoped lang="less">
.login {
  color: red;
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
</style>
